<div class="page">
  <div class="header">
    <div class="header-text">
      <span>生产看板</span>
    </div>
  </div>
  <div class="body">
    <div class="body-content">
      <div class="content-banner">
        <div class="banner-item-box">
          <div class="box-item">
            <img src="../../../assets/img/看板素材/生成看板/数据展示.png" alt="">
            <span class="item-number number1">{{jobOrderData.jobOrderProcessCount}}</span>
            <span class="item-text">工序任务数量</span>
          </div>
          <div class="box-item">
            <img src="../../../assets/img/看板素材/生成看板/数据展示.png" alt="">
            <span class="item-number number1">{{jobOrderData.jobOrderProcessCompletedCount}}</span>
            <span class="item-text">已完成数量</span>
          </div>
        </div>
        <div class="banner-item-box">
          <div class="box-item">
            <img src="../../../assets/img/看板素材/生成看板/数据展示.png" alt="">
            <span class="item-number number2">{{jobOrderData.jobOrderCount}}</span>
            <span class="item-text">工单数量</span>
          </div>
          <div class="box-item">
            <img src="../../../assets/img/看板素材/生成看板/数据展示.png" alt="">
            <span class="item-number number2">{{jobOrderData.jobOrderCompletedCount}}</span>
            <span class="item-text">工单完工数量</span>
          </div>
        </div>
        <div class="banner-item-box">
          <div class="box-item">
            <img src="../../../assets/img/看板素材/生成看板/数据展示.png" alt="">
            <span class="item-number number3">{{jobOrderData.plannedProductionCount}}</span>
            <span class="item-text">计划生产数量</span>
          </div>
          <div class="box-item">
            <img src="../../../assets/img/看板素材/生成看板/数据展示.png" alt="">
            <span class="item-number number3">{{jobOrderData.producedCount}}</span>
            <span class="item-text">已生产数量</span>
          </div>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="content-item left">
          <div class="content-item-item">
            <div class="item-title">
              <div class="title-img">
                <img src="../../../assets/img/看板素材/生成看板/标题边框.png" alt="">
                <div class="title-span">
                  工序状态统计
                </div>
              </div>
            </div>
            <div class="item-body" id="gongxu">
            </div>
          </div>
          <div class="content-item-item bot">
            <div class="item-title">
              <div class="title-img">
                <img src="../../../assets/img/看板素材/生成看板/标题边框.png" alt="">
                <div class="title-span">
                  报工合格比率
                </div>
              </div>
            </div>
            <div class="item-body baogong" >
              <div class="item-body-body" id="baogong">
              </div>
              <div class="title">
                <div class="title-text">
                  <div class="icon" style="color:#4adfcb">
                    <span class="icon-dot-status"></span>&nbsp;
                    <span>总计{{reportingQualifiedRate.totalQualifiedCount}}</span>&nbsp;
                  </div>
                  <div class="number" style="color:#4adfcb">
                    <span>占比{{(reportingQualifiedRate.totalQualifiedCount/reportingQualifiedRate.totalReportedCount)*100 | number:'1.2-2'}}%</span>&nbsp;
                  </div>
                </div>
                <div class="title-text">
                  <div class="icon" style="color:#2ac8f2">
                    <span class="icon-dot-status"></span>&nbsp;
                    <span>总计{{reportingQualifiedRate.totalUnqualifiedCount}}</span>&nbsp;
                  </div>
                  <div class="number" style="color:#2ac8f2">
                    <span>占比{{(reportingQualifiedRate.totalUnqualifiedCount/reportingQualifiedRate.totalReportedCount)*100 | number:'1.2-2'}}%</span>&nbsp;
                  </div>
                </div>
                <div class="title-text">
                  <div class="icon" style="color:#f7b500">
                    <span class="icon-dot-status"></span>&nbsp;
                    <span>总计{{reportingQualifiedRate.totalScrapCount}}</span>&nbsp;
                  </div>
                  <div class="number" style="color:#f7b500">
                    <span>占比{{(reportingQualifiedRate.totalScrapCount/reportingQualifiedRate.totalReportedCount)*100 | number:'1.2-2'}}%</span>&nbsp;
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-item mid">
          <div class="content-item-item top">
            <div class="item-left">
              <div class="img">
                <img src="../../../assets/img/看板素材/生成看板/地球背景.png" alt="" class="left-left-img">
                <div class="img-text">
                  <div class="text-number">
                    {{processStatusData.jobOrderProcessStartedCount}}
                  </div>
                  <div class="text-type">
                    已开工工序
                  </div>
                </div>
              </div>
              <div class="item-left-text1">
                <div class="jiantou">
                  <div class="horizontal-line"></div>
                <div class="small-circle"></div>
                </div>
                <div class="text">
                  <div class="text-number">
                    {{jobOrderData.todayJobOrderProcessCompletedCount}}
                  </div>
                  <div class="text-type">
                    今日完成数量
                  </div>
                </div>
              </div>
              <div class="item-left-text2">
                <div class="jiantou">
                  <div class="horizontal-line"></div>
                <div class="small-circle"></div>
                </div>
                <div class="text">
                  <div class="text-number">
                    {{jobOrderData.weekJobOrderProcessCompletedCount}}
                  </div>
                  <div class="text-type">
                    本周完成数量
                  </div>
                </div>
              </div>
              <div class="item-left-text3">
                <div class="jiantou">
                  <div class="horizontal-line"></div>
                <div class="small-circle"></div>
                </div>
                <div class="text">
                  <div class="text-number">
                    {{jobOrderData.jobOrderProcessCompletedCount}}
                  </div>
                  <div class="text-type">
                    累积完成数量
                  </div>
                </div>
              </div>
            </div>
            <div class="item-right">
              <div class="item-title">
                <div class="title-img">
                  <img src="../../../assets/img/看板素材/生成看板/标题边框.png" alt="">
                  <div class="title-span">
                    工序最新动态
                  </div>
                </div>
              </div>
              <div class="item-body zhuangtai" itemBody>
                <div class="list">
                  <div *ngFor="let message of messages; let i = index" class="list-item" [ngClass]="{'alternate': i % 2 === 0}" >
                    <div class="list-item-type">
                      <div class="type-time">{{ message.timeStamp }}</div>
                      <div class="type-type" [ngClass]="{
                        'type-kaigong': message.content === '开工',
                        'type-baogong': message.content === '报工',
                        'type-zanting': message.content === '暂停',
                        'type-huifu': message.content === '恢复'
                      }">
                        {{ message.content }}
                      </div>
                    </div>
                    <div class="list-item-event" *ngIf="message.content === '报工'">{{ message.username }}在工单{{message.jobOrderNumber}}的{{message.processName}}工序上报工了{{message.reportedQuantity}}</div>
                    <div class="list-item-event" *ngIf="message.content !== '报工'">{{ message.username }}{{message.content}}了工单{{message.jobOrderNumber}}的{{message.processName}}工序</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-item-item bot">
            <div class="item-title">
              <div class="title-img">
                <img src="../../../assets/img/看板素材/生成看板/标题边框.png" alt="">
                <div class="title-span">
                  工序任务数量
                </div>
              </div>
            </div>

            <div class="item-body gongxuTask" id="gongxuTask">
            </div>
          </div>
        </div>
        <div class="content-item right">
          <div class="content-item-item top">
            <div class="item-title">
              <div class="title-img">
                <img src="../../../assets/img/看板素材/生成看板/标题边框.png" alt="">
                <div class="title-span">
                  生产物料数量
                </div>
              </div>
            </div>
            <div class="item-body" id="wuliao">

            </div>
          </div>
          <div class="content-item-item bot">
            <div class="item-title">
              <div class="title-img">
                <img src="../../../assets/img/看板素材/生成看板/标题边框.png" alt="">
                <div class="title-span">
                  暂停原因统计
                </div>
              </div>
            </div>
            <div class="item-body zanting" >
              <div class="zanting-right" >
                <div class="zanting-title-text" *ngFor="let zanting of zantingData">
                  <div class="icon" [style.color]="zanting.color">
                    <span class="icon-dot-status"></span>&nbsp;
                    {{zanting.pauseReason}}
                  </div>
                  <div class="number" [style.color]="zanting.color">
                    <span>{{zanting.count}}({{(zanting.count/getTotalCount()*100) | number:'1.2-2' }}%)</span>&nbsp;
                  </div>
                </div>

              </div>
              <div class="zanting-left" id="zanting"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
